<!-- 聊天消息项组件 -->
<template>
  <li :class="getItemClass(message.id)">
    <!-- 机器人消息 -->
    <div v-if="message.id === 2" class="message-content">
      <!-- 文本消息 -->
      <div v-if="message.cont" class="message-bubble">
        <span>{{ message.cont }}</span>
      </div>
      
      <!-- 图片消息 -->
      <div v-if="message.img" class="message-image" @click="handleImageClick(message)">
        <img :src="message.img" alt="用户图片" />
      </div>
      
      <!-- 卡片消息 -->
      <div v-if="message.card" class="message-card">
        <p>{{ message.card.title }}</p>
        <img :src="message.card.imgurl" alt="卡片图片" />
      </div>
    </div>
    
    <!-- 用户头像 -->
    <span v-if="message.id === 1 || message.id === 2" class="message-avatar">
      <img src="../u171.png" alt="用户头像" />
    </span>
    
    <!-- 用户消息 -->
    <div v-if="message.id === 1" class="message-content-user">
      <!-- 文本消息 -->
      <div v-if="message.cont" class="message-bubble-user">
        <span>{{ message.cont }}</span>
        
        <!-- 按钮组件区域 -->
        <message-buttons 
          v-if="['buttom', 'buttom1', 'buttom3'].includes(message.type)"
          :message="message"
          @button-click="handleButtonClick"
        />
        
        <!-- 视频区域 -->
        <div v-if="message.type === 'mp4'" class="video-container">
          <span>MP4视频</span>
        </div>
        
        <!-- 链接卡片 -->
        <div v-if="message.type === 'link'" class="link-container">
          <id-info2 :fatherMsg="message" />
        </div>
      </div>
      
      <!-- 图片消息 -->
      <div v-if="message.img" class="message-image-user" @click="handleImageClick(message)">
        <img :src="message.img" alt="用户图片" />
      </div>
    </div>
  </li>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits } from 'vue';
import { showImagePreview } from '@nutui/nutui';
import idInfo2 from '../idInfo2/index.vue';
import MessageButtons from './MessageButtons.vue';

// 类型定义
interface Card {
  title: string;
  imgurl: string;
}

interface ChatItem {
  id: ChatRole;
  type: MessageType;
  cont?: string;
  img?: string | null;
  card?: Card;
  btn?: string;
  btn1?: string;
  btn2?: string;
  btn3?: string;
  name?: string;
  des?: string;
}

type ChatRole = 0 | 1 | 2; // 0: 系统消息, 1: AI助手, 2: 用户
type MessageType = 'info' | 'img' | 'mp4' | 'buttom' | 'buttom1' | 'buttom3' | 'link';

// Props 定义
const props = defineProps<{
  message: ChatItem;
}>();

// Emits 定义
const emits = defineEmits<{
  (e: 'buttonClick', message: string): void;
}>();

// 判断消息类型的样式类
const getItemClass = (id: number): string => {
  if (id === 1) return 'pop__chat-msg-me';
  if (id === 2) return 'pop__chat-msg-me2';
  return '';
};

// 处理图片点击
const handleImageClick = (item: ChatItem) => {
  if (!item.img) return;
  
  showImagePreview({
    show: true,
    images: [{ src: item.img }],
    onClose: () => console.log('图片预览已关闭')
  });
};

// 处理按钮点击
const handleButtonClick = (message: string) => {
  emits('buttonClick', message);
};
</script>

<style lang="scss" scoped>
// 消息样式
.pop__chat-msg-me, .pop__chat-msg-me2 {
  display: flex;
  margin-bottom: 0.36rem;
  width: max-content;
}

.pop__chat-msg-me {
  justify-content: flex-end;
}

.message-content, .message-content-user {
  display: flex;
}

.message-content {
  width: 8.29rem;
  justify-content: flex-end;
}

.message-content-user {
  width: 6.29rem;
}

.message-bubble {
  border-style: solid;
  border-width: 0.02rem;
  border-radius: 0.07rem;
  font-size: 0.36rem;
  margin: 0 0.2rem;
  padding: 0.28rem 0.2rem;
  position: relative;
  max-width: 4.5rem;
  background-color: #4cb4e7;
  color: #fff;
  float: right;

  &::before {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 0.01rem 0.01rem 0 0;
    height: 0.2rem;
    width: 0.2rem;
    position: absolute;
    top: 0.3rem;
    background: inherit;
    border-color: inherit;
    right: -0.11rem;
    transform: translate(0, -50%) rotate(45deg);
  }
}

.message-bubble-user {
  border-style: solid;
  border-width: 0.02rem;
  border-radius: 0.07rem;
  font-size: 0.36rem;
  margin: 0 0.2rem;
  padding: 0.28rem 0.2rem;
  position: relative;
  background-color: #fff;
  color: #333;
  float: left;
  max-width: 5.5rem;

  &::before {
    content: '';
    display: inline-block;
    border-style: solid;
    border-width: 0.01rem 0.01rem 0 0;
    height: 0.2rem;
    width: 0.2rem;
    position: absolute;
    top: 0.3rem;
    background: inherit;
    border-color: inherit;
    left: -0.11rem;
    transform: translate(0, -50%) rotate(45deg);
  }
}

.message-image, .message-image-user {
  border-radius: 0.07rem;
  float: left;
  margin: 0 0.2rem;
  position: relative;
}

.message-image {
  max-width: 3rem;
}

.message-image-user {
  max-width: 2rem;
}

.message-card {
  @extend .message-bubble;
  
  p {
    margin-bottom: 0.5rem;
  }
}

.message-avatar {
  display: block;
  overflow: hidden;
  height: 1.2rem;
  width: 1.2rem;
  border-radius: 0.07rem;
}

.video-container {
  width: 5.5rem;
  padding: 30px 0;
  background-color: #fff;
  text-align: center;
}

.link-container {
  width: 5.5rem;
  padding: 8px 0;
  background-color: #fff;
  text-align: center;
}
</style> 